import type { ComponentsConfig, ComponentsConfigRaw } from '../../types'
import { extendSchemas } from '@/components/cms/utils'
import advsConfig from './base/advs'
import { tabsList, participatingWorks } from './simples'

const basePath = 'template.actorDetailsMore'

const config: ComponentsConfig = {
  default: 'tabsList',
  components: extendSchemas<ComponentsConfigRaw>(
    {
      tabsList: tabsList({
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          style: `${basePath}.content.tabs.style`,
          background: `${basePath}.content.tabs.background`,
          indicator: {
            color: `${basePath}.content.tabs.indicator.color`,
            height: `${basePath}.content.tabs.indicator.height`
          },
          text: {
            color: `${basePath}.content.tabs.text.color`,
            size: `${basePath}.content.tabs.text.height`,
            selectedColor: `${basePath}.content.tabs.text.selectedColor`,
            selectedSize: `${basePath}.content.tabs.text.selectedSize`
          }
        }
      }),
      participatingWorks: participatingWorks({
        sort: 2,
        actorMore: false,
        pageFields: {
          background: `${basePath}.background`
        },
        fields: {
          layout: {
            style: `${basePath}.content.works.layout.style`,
            limit: `${basePath}.content.works.layout.limit`
          }
        }
      })
    },
    advsConfig(['playerBeforeAdv', 'playerPauseAdv'])
  )
}
export default config
